<template>
  <!-- 注册页 -->
  <div>
    <van-form @submit="onSubmit">
      <van-nav-bar
        title="登陆"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      />

      <!-- 用户名 -->
      <van-field
        v-model="name"
        name="name"
        label="用户名"
        placeholder="用户名"
        required
        :rules="[{ required: true, message: '请填写用户名' }]"
      />

      <!-- 密码 -->
      <van-field
        v-model="pwd"
        type="password"
        name="pwd"
        label="密码"
        placeholder="密码"
        required
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <!-- 性别 -->
      <van-field name="sex" label="单选框">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="man">男</van-radio>
            <van-radio name="women">女</van-radio>
            <van-radio name="secrecy">保密</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 邮箱 -->
      <van-field
        v-model="Email"
        name="Email"
        center
        clearable
        required
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      >
        <template #button>
          <van-button
            :disabled="showSendEmail ? false : true"
            size="small"
            type="primary"
            @click="sendEmail"
            >{{
              showSendEmail ? "发送邮箱验证码" : delayTime + "秒"
            }}</van-button
          >
        </template>
      </van-field>

      <!-- 邮箱验证码 -->
      <van-field
        v-model="Emailmsg"
        required
        name="Emailmsg"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />

      <!-- 手机号 -->
      <van-field
        v-model="phone"
        name="phone"
        required
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />

      <!-- 手机验证码 -->
      <van-field
        v-model="phonemsg"
        required
        name="phonemsg"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />

      <!-- 生日 -->
      <van-field
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="出生日期"
        placeholder="点击选择时间"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <!-- 提交 -->
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { sendCode, register } from "../../apis/register.js";
export default {
  data() {
    return {
      name: "", //用户名
      pwd: "", //密码
      sex: 1, //性别
      Email: "", //邮箱
      Emailmsg: "", //邮箱验证码
      phone: "", //手机号
      phonemsg: "", //手机验证码
      birthday: "", //生日
      showPicker: false, //是否显示弹出层
      delayTime: 3, //发送验证码后的倒计时
      showSendEmail: true, //发送验证码的按钮
    };
  },
  methods: {
    async API_sendEmail(email) {
      return await this.$http.request({
        url: sendCode,
        method: "POST",
        data: {
          email,
        },
      });
    },
    async API_register(email) {
      return await this.$http.request({
        url: register,
        method: "POST",
        data: {
          email,
        },
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    //时间
    onConfirm(value) {
      this.birthday = this.$formTime(value);
      this.showPicker = false;
    },
    async sendEmail() {
      this.showSendEmail = false;

      let res = this.API_sendEmail(this.email);
      console.log(res);

      this.showSendEmailTimer = setInterval(() => {
        if (this.delayTime <= 0) {
          this.delayTime = 3;
          this.showSendEmail = true;
          clearInterval(this.showSendEmailTimer);
        } else {
          this.delayTime--;
        }
      }, 1000);
    },
    onSubmit(val) {
      console.log(val);
    },
  },
};
</script>

<style>
</style>